/**
 * Created by Kylin on 2016/12/7.
 */

// TodoEntry

export const TodoEntry = `import React, {Component} from 'react';
import {connect} from 'react-redux';
import Content from '../../../public/common/Content'
import TodoIntro from './TodoIntro';
import AddTodo from './AddTodo';
import TodoList from './TodoList';
import TabShow from './TabShow';

import {addTodo, completedTodo, setVisibilityFilter, VisibilityFilters} from '../../../public/redux/actions'

class TodoApp extends Component {
  render() {
    const {dispatch, todos, visibilityFilter} = this.props;
    return (
      <Content>
        <TodoIntro className=""/>
        <div>
          <AddTodo onAddClick={text => dispatch(addTodo(text))}/>
          <TodoList todos={todos} onTodoClick={index => dispatch(completedTodo(index))}/>
          <TabShow filter={visibilityFilter} onFilterChange={filter => dispatch(setVisibilityFilter(filter))}/>
        </div>
      </Content>
    )
  }
}

function selectTodos(todos, filter) {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos;
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(todo => todo.completed);
    case  VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(todo => !todo.completed);
    default:
      return todos;
  }
}

const mapStateToProps = (state) => {
  return {
    todos: selectTodos(state.todos, state.visibilityFilter),
    visibilityFilter: state.visibilityFilter
  }
}

export default connect(mapStateToProps)(TodoApp);

// 按需加载
module.exports = connect(mapStateToProps)(TodoApp);`;

// AddTodo
export const AddTodoText = `import React, {Component, PropTypes} from 'react';

export default class AddTodo extends Component {
  handlerClick() {
    let node = this.refs.input,
      text = node.value.trim();
    this.props.onAddClick(text);
    node.value = '';
  }

  render() {
    return (
      <div>
        <input type="text" ref='input'/>
        <button type="button" onClick={()=> this.handlerClick()}>Add</button>
      </div>
    )
  }
}

AddTodo.propTypes = {
  onAddClick: PropTypes.func.isRequired
}`;

// TodoList
export const TodoListText = `import React, {Component, PropTypes} from 'react';

export default class TodoList extends Component {
  render() {
    return (
      <ul>
        {
          this.props.todos.map((todo, index) => <li
            key={index} onClick={(e)=> this.props.onTodoClick(index)}
            style={{
              textDecoration: todo.completed ? 'line-through' : 'none',
              cursor: todo.completed ? 'default' : 'pointer'
            }}
          >{todo.text}</li>)
        }
      </ul>
    )
  }
}

TodoList.propTypes = {
  onTodoClick: PropTypes.func.isRequired,
  todos: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  }).isRequired).isRequired
}`;

// TabShow
export const TabShow = `import React, {Component, PropTypes} from 'react';

export default class TabShow extends Component {
  renderFilter(filter, name) {
    if (filter === this.props.filter) return name;

    return (<a href="#" onClick={(e)=> {
        e.preventDefault();
        this.props.onFilterChange(filter);
      }}>{name}</a>)
  }

  render() {
    return (
      <div>
        Show:
        {' '}
        {this.renderFilter('SHOW_ALL', 'ALL')}
        {', '}
        {this.renderFilter('SHOW_COMPLETED', 'Completed')}
        {', '}
        {this.renderFilter('SHOW_ACTIVE', 'Active')}
        .
      </div>
    )
  }
}
TabShow.propTypes = {
  onFilterChange: PropTypes.func.isRequired,
  filter: PropTypes.oneOf(['SHOW_ALL', 'SHOW_COMPLETED', 'SHOW_ACTIVE']).isRequired
}`;

// Actions
export const TodoActions = `export const ADD_TODO = 'ADD_TODO';
export const COMPLETED_TODO = 'COMPLETED_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
};

// 添加事件动作
export function addTodo(text) {
  return {type: ADD_TODO, text}
}

export function completedTodo(index) {
  return {type: COMPLETED_TODO, index}
}

export function setVisibilityFilter(filter) {
  return {type: SET_VISIBILITY_FILTER, filter}
}`;

// Reducers
export const TodoReducers = `import {combineReducers} from 'redux';
import {ADD_TODO, COMPLETED_TODO, SET_VISIBILITY_FILTER, VisibilityFilters} from './actions';

const {SHOW_ALL} = VisibilityFilters;

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, {text: action.text, completed: false}]

    case COMPLETED_TODO:
      return [
        ...state.slice(0, action.index),
        Object.assign({}, state[action.index], {completed: true}),
        ...state.slice(action.index + 1)
      ]

    default:
      return state
  }
}

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter
    default:
      return state
  }
}

export default combineReducers({
  todos,
  visibilityFilter
})`;

